//参考引用 [小陆_39194983 vue3 自定义指令]https://blog.csdn.net/qq_39194983/article/details/139611136

const drag = (el, bingding) => {
	console.log("drag el", el); // 这个 el 就是挂载 v-drag 指定的元素
	const right = window.innerWidth - el.clientWidth;
	const bottom = window.innerHeight - el.clientHeight;

	// 获取内部第一个div元素
	let moveElement = el.firstElementChild;
	moveElement.style.cursor = "move";
	// 鼠标按下的事件
	const mouseDown = e => {
		let X = e.clientX - el.offsetLeft;
		let Y = e.clientY - el.offsetTop;

		// 鼠标移动事件
		const move = e => {
			// 控制向左移动最左不能超出窗口左侧 且 向右移动最右不能让盒子超出窗口右侧
			let moveX =
				el.offsetLeft < 0
					? 0
					: e.clientX - X > right
					? right
					: e.clientX - X;
			// 控制向上移动最上不能超出窗口顶部 且 向下移动最下不能让盒子超出窗口底部
			let moveY =
				e.clientY - Y < 0
					? 0
					: e.clientY - Y > bottom
					? bottom
					: e.clientY - Y;

			el.style.left = moveX + "px";
			el.style.top = moveY + "px";
		};
		document.addEventListener("mousemove", move);
		// 在鼠标抬起时去移除移动事件
		document.addEventListener("mouseup", () => {
			// 移除移动事件
			document.removeEventListener("mousemove", move);
		});
	};
	// 为获取到的div盒子绑定鼠标按下事件
	moveElement.addEventListener("mousedown", mouseDown);
};

export default drag;
